<template lang='pug'>
  Modal.lzw-modal-style-1(v-model="modalShow" fullscreen :title="setName")
    Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe border :columns="thead" :data="listData")
      template(slot-scope="{ row, index }" slot="name")
        .font-12.time-td.ellipsis(v-for="(item,index) in tableName" :key="index")
          span {{item}}
      template(slot-scope="{ row, index }" slot="target")
        .font-12.time-td.ellipsis(v-for="(item,index) in target" :key="index")
          span {{item}}
      template(slot-scope="{ row, index }" slot="finish")
        .font-12.time-td.ellipsis(v-for="(item,index) in finish" :key="index")
          span {{item}}
      template(slot-scope="{ row, index }" slot="rate")
        .font-12.time-td.ellipsis(v-for="(item,index) in rate" :key="index")
          span {{item}}%
    template(slot="footer")
      Button(@click="modalShow = false") 关闭
</template>

<script>
import WorkScheduleApi from '@/api/WorkSchedule.api.js'
export default {
  name:'',
  props:{
    name: String,
    listData: Array,
    tableName: Array,
    target: Array,
    finish: Array,
    rate: Array,
    loading: Boolean
  },
  data () {
    return {
      modalShow: false,
      thead: [
        {
          title: '任务项',
          minWidth: 150,
          align: 'center',
          slot: 'name',
          className: 'no-padding'
        },
        {
          title: '目标任务',
          minWidth: 150,
          align: 'center',
          slot: 'target',
          className: 'no-padding'
        },
        {
          title: '已完成',
          minWidth: 150,
          align: 'center',
          slot: 'finish',
          className: 'no-padding'
        },
        {
          title: '完成率',
          minWidth: 150,
          align: 'center',
          slot: 'rate',
          className: 'no-padding'
        }
      ],
    }
  },

  components: {},

  computed: {
    setName () {
      return this.name + '完成情况'
    }
  },
  watch: {
  },

  beforeMount() {},

  mounted() {},

  methods: {
    show () {
      this.modalShow = true
    },
  }

}

</script>
<style lang='less' scoped>
  .d-flex{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .target{
    text-align: left;
  }
  .time-td{
    padding: 2px 4px;
    height: 45px;
    text-align: center;
    line-height: 43px;
    border-bottom: 1px solid #cfeef9;
    // cursor: pointer;
    &:last-child{
      border-bottom: none;
    }
  }
</style>